<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Select with feature layer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      #messages{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 15em;
        padding: 0.5em;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 40;
      }
	  #start{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 6em;
        padding: 0.5em;
        position: absolute;
        right: 210px;
        top: 110px;
        z-index: 40;
      }
	  #stop{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 6em;
        padding: 0.5em;
        position: absolute;
        right: 120px;
        top: 110px;
        z-index: 40;
      }
	  #clear{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 6em;
        padding: 0.5em;
        position: absolute;
        right: 20px;
        top: 110px;
        z-index: 40;
      }
    </style>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/FeatureLayer", 
        "esri/tasks/query", "esri/geometry/Circle",
        "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        Query, Circle,
        Graphic, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        esriConfig, Color, dom
      ) {
        // Use a proxy page if a URL generated by this page is greater than 2000 characters
        //
        // This should not be needed as nearly all query & select functions are performed on the client
        esriConfig.defaults.io.proxyUrl = "/proxy/";

        map = new Map("mapDiv", { 
          basemap: "osm",
          center: [-95.249, 38.954],
          zoom: 14,
          slider: false
        });
        
        // Add the census block points in on demand mode. An outfield is specified since it is used when calculating   the total population falling within the one mile radius.
        var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{
          outFields: ["POP2000"]
        });

        // Selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE, 
          12, 
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL, 
            new Color([247, 34, 101, 0.9]), 
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol); 
        
        // Make unselected features invisible
        //var nullSymbol = new SimpleMarkerSymbol().setSize(0);
        //featureLayer.setRenderer(new SimpleRenderer(nullSymbol));
        
        map.addLayer(featureLayer);
        
        var circleSymb = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
            new Color([105, 105, 105]),
            2
          ), new Color([255, 255, 0, 0.25])
        );
        var circle;
		
		//zidingyi
		var shuzu=[];
		var handler;
		dom.byId("start").onclick=function(){
			if(handler!=null){
			handler.remove();
			}
			handler =map.on("click", function(evt){
				var currentScale = map.getScale();
				console.log('开始执行多选');
				map.graphics.clear();
				var query = new Query();
				query.geometry = evt.mapPoint;
				if(currentScale>36000){
					query.distance = 100
				}else if(currentScale>18000){
					query.distance = 50
				}else if(currentScale>9000){
					query.distance = 30
				}else{
					query.distance = 20
				}
				featureLayer.queryFeatures(query, selectInshuzu);
			});
		}
		function selectInshuzu(response){
			var feature;
			var features = response.features;
			if(features.length>0){
				feature = features[0];				
				shuzu.push(feature.attributes[featureLayer.objectIdField]);
				}
				var query = new Query();
				query.objectIds = shuzu;
				// Use an objectIds selection query (should not need to go to the server)
				featureLayer.selectFeatures(query, FeatureLayer.SELECTION_ADD, function(results){
				var totalPopulation = sumPopulation(results);
				var r = "";
				r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
				dom.byId("messages").innerHTML = r;
			});
		}
		dom.byId("clear").onclick=function(){
			shuzu=[];
			map.graphics.clear();
			featureLayer.clearSelection();
			var r = "";
				r = "<b>The total Census Block population within the buffer is <i>0</i>.</b>";
				dom.byId("messages").innerHTML = r;
		}
		dom.byId("stop").onclick=function(){
			if(handler!=null){
				handler.remove();
			}			
			handler = map.on("click", function(evt){
			var currentScale = map.getScale();
			var query = new Query();
				query.geometry = evt.mapPoint;
				if(currentScale>36000){
					query.distance = 100
				}else if(currentScale>18000){
					query.distance = 50
				}else if(currentScale>9000){
					query.distance = 30
				}else{
					query.distance = 20
				}
				
			// Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
			featureLayer.queryFeatures(query, selectInBuffer);
			});
			}
		

			// When the map is clicked create a buffer around the click point of the specified distance
			handler = map.on("click", function(evt){
			var currentScale = map.getScale();
			var query = new Query();
				query.geometry = evt.mapPoint;
				if(currentScale>36000){
					query.distance = 100
				}else if(currentScale>18000){
					query.distance = 50
				}else if(currentScale>9000){
					query.distance = 30
				}else{
					query.distance = 20
				}
				
			// Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
			featureLayer.queryFeatures(query, selectInBuffer);
			});

			function selectInBuffer(response){
			var feature;
			var features = response.features;
			var inBuffer = [];
			// Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
			if(features.length>0){
				feature = features[0];				
				inBuffer.push(feature.attributes[featureLayer.objectIdField]);
			}
			<!-- for (var i = 0; i < features.length; i++) { -->
				<!-- feature = features[i]; -->
				<!-- if(circle.contains(feature.geometry)){ -->
				<!-- inBuffer.push(feature.attributes[featureLayer.objectIdField]); -->
				<!-- } -->
			<!-- } -->
			var query = new Query();
			query.objectIds = inBuffer;
			// Use an objectIds selection query (should not need to go to the server)
			featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
				var totalPopulation = sumPopulation(results);
				var r = "";
				r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
				dom.byId("messages").innerHTML = r;
			});
			}
        
			function sumPopulation(features) {
			var popTotal = 0;
			for (var x = 0; x < features.length; x++) {
				popTotal = popTotal + features[x].attributes["POP2000"];
			}
			return popTotal;
			}
		

      });
    </script>
  </head>

  <body>
    <span id="messages">Click on the map to select census block points within 1 mile.</span>
	<span><button id="start">开始多选</button><button id="stop">结束多选</button><button id="clear">清除所选</button></span>
    <div id="mapDiv"></div>
	<!-- <div><button id="start">start</button></div> -->
	<!-- <div><button id="stop">stop</button><button id="clear">clear</button></div> -->
  </body>
</html>